@keyframes Blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.shortcut-key-input-father {
  height: 40px;
  .shortcut-key-input {
    position: relative;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    padding: 2px 0;
    cursor: text;
    height: 100%;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    flex-direction: column;
    justify-content: center;
    &:focus {
      border-color: #188cff;
      box-shadow: 0 0 4px rgba(24, 140, 255, 0.38);
    }
    .placeholder {
      position: absolute;
      top: 12px;
      left: 11px;
      color: #c0c4cc;
      font-size: 13px;
      text-indent: 4px;
      font: 400 13.3333px Arial;
    }

    span {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      background-color: #f4f4f5;
      border-color: #e9e9eb;
      color: #909399;
      padding: 0 22px 0 8px;
      height: 28px;
      font-size: 14px;
      line-height: 28px;
      border-radius: 4px;
      margin: 5px;
      i {
        position: absolute;
        top: 6px;
        right: 4px;
        content: "";
        background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M512 64C264.58 64 64 264.58 64 512s200.58 448 448 448 448-200.58 448-448S759.42 64 512 64zm0 832c-212.08 0-384-171.92-384-384s171.92-384 384-384 384 171.92 384 384-171.92 384-384 384z' fill='%23909399'/%3E%3Cpath d='M625.14 353.61L512 466.75 398.86 353.61a32 32 0 0 0-45.25 45.25L466.75 512 353.61 625.14a32 32 0 0 0 45.25 45.25L512 557.25l113.14 113.14a32 32 0 0 0 45.25-45.25L557.25 512l113.14-113.14a32 32 0 0 0-45.25-45.25z' fill='%23909399'/%3E%3C/svg%3E")
          no-repeat center;
        background-size: contain;
        width: 14px;
        height: 14px;
        transform: scale(0.9);
        opacity: 0.6;
        &:hover {
          cursor: pointer;
          opacity: 1;
        }
      }
    }
  }
}

.shortcut-key-input-overflow {
  overflow: auto;
}

.shortcut-key-input.cursor::after {
  content: "|";
  animation: Blink 1.2s ease 0s infinite;
  font-size: 18px;
  position: absolute;
  top: 7px;
  left: 8px;
}
